import Card from '@/components/Card';
import Description from '@/components/Description';
import { upgradeManageControllerGetById } from '@/services/ess/upgradeManage';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import { DescriptionsItemType } from 'antd/es/descriptions';
import React, { useEffect, useState } from 'react';
import { useIntl, useSearchParams } from 'umi';

const UpdateDetail: React.FC = () => {
  const [searchParams] = useSearchParams();
  const id = searchParams.get('id');
  const intl = useIntl();
  const [baseDes, setBaseDes] = useState<DescriptionsItemType[]>([
    {
      label: intl.formatMessage({ id: 'remoteUpgradeMangment.generalProcedure.tenantName' }),
      key: 'tenantName',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'remoteUpgradeMangment.upgradeManagement.plantName' }),
      key: 'stationName',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'remoteUpgradeMangment.versionManagement.deviceType' }),
      key: 'deviceType',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'remoteUpgradeMangment.versionManagement.deviceModel' }),
      key: 'deviceModel',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'remoteUpgradeMangment.upgradeManagement.deviceName' }),
      key: 'tenantName',
      children: '',
    },
    {
      label: intl.formatMessage({ id: 'remoteUpgradeMangment.upgradeManagement.Currentversion' }),
      key: 'version',
      children: '',
      span: 1,
    },
  ]);
  useEffect(() => {
    upgradeManageControllerGetById({ flowId: id }).then(async (res) => {
      const dictOption = await fetchDictInfo(DATABASE_TYPE_ENUM.UPDATE_DEVICE_TYPE);
      if (res.success) {
        const formData = JSON.parse(JSON.stringify(res.data));
        formData.deviceType = dictOption.find((item) => {
          return Number(item.value) === Number(formData.deviceType);
        })?.label;
        const getBaseDes = baseDes.map((item) => {
          return {
            ...item,
            children: formData[item.key],
          };
        });
        setBaseDes(getBaseDes);
      }
    });
  }, []);
  // const timeLine: TimeLineItemProps[] = [
  //   {
  //     children: 'Create a services site 2015-09-01',
  //   },
  //   {
  //     children: 'Solve initial network problems 2015-09-01',
  //   },
  //   {
  //     children: 'Technical testing 2015-09-01',
  //   },
  //   {
  //     children: 'Network problems being solved 2015-09-01',
  //   },
  // ];
  return (
    <>
      <Card
        title={intl.formatMessage({
          id: 'remoteUpgradeMangment.versionManagement.Basicinformation',
        })}
      >
        <Description items={baseDes}></Description>
      </Card>
      <Card
        title={intl.formatMessage({ id: 'remoteUpgradeMangment.upgradeManagement.UpgradeHistory' })}
        style={{ marginTop: '40px' }}
      >
        {/*<Timeline items={timeLine}></Timeline>*/}
      </Card>
    </>
  );
};

export default UpdateDetail;
